// webpack.config.js
const path = require('path')  // nodejs中的路径模块
// 导入插件，返回一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderLibPlugin = require('vue-loader/lib/plugin')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

// webpack v5 自带， v4需要安装。关于插件的更多配置请看官方文档：https://webpack.docschina.org/plugins/terser-webpack-plugin/
const TerserJSPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

const webpack = require('webpack')
const resolve = dir => path.join(__dirname, dir)

module.exports = {
	// 编译模式(会修改process.env.NODE_ENV的值，并启用对应的webpack官方的插件)
	mode: 'production',   // development production
	entry: resolve('src/main.js'), // 入口文件
	output: {
		path: resolve('dist'), // 输出文件存放路径
		filename: 'js/[name].[hash:8].js', // 输出文件名称
		publicPath: '/', // 此输出目录对应的公开 URL
	},
	resolve: {
		alias: {
			'@': resolve('src'),
			'#': resolve('public'),
		},
		modules: [
			'node_modules',
			resolve('node_modules'),
		],
	},
	optimization: {
		// TerserJSPlugin: 压缩JS
		// OptimizeCSSAssetsPlugin: 压缩CSS
		minimize: true,
		minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
	},
	plugins: [
		// 把index放到项目根目录中(https://segmentfault.com/a/1190000007294861)
		new HtmlWebpackPlugin({
			version: `v${require('./package.json').version}`,
			title: '我的自定义标题',
			template: resolve('public/index.html'),
			filename: 'index.html',
			inject: true,
			favicon: resolve('public/favicon.ico')
		}),
		// 打包vue单文件组件
		new VueLoaderLibPlugin(),
		// 引用HMR插件，修改js代码的时候自动刷新页面
		new webpack.HotModuleReplacementPlugin(),
		// 清除打包文件(除了编译后的文件，其他都会被删除，不信的话就往dist目录加几个其他文件运行webpack打包)
		new CleanWebpackPlugin(),
		// 拷贝文件(这里是从from指定的文职拷贝到打包文件夹的to位置)
		new CopyWebpackPlugin([
			{
				from: resolve('src/assets/img/'),
				to: 'assets'
			}
		]),
		// 把css提取出来，单独放到一个文件里面来引入到html里面
		new MiniCssExtractPlugin({
			filename: '[name].css',
			chunkFilename: '[id].css'
		}),
		// 定义全局变量
		new webpack.DefinePlugin(
			{
				'BASE_URL': JSON.stringify('/')
			}
		)
	],
	module: {
		rules: [
			// 注意：loader是倒序加载，流水线处理
			// MiniCssExtractPlugin.loader取代style-loader
			// style-loader是将样式写到style标签内，而MiniCssExtractPlugin.loader将样式写到一个文件内通过link引入
			{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] },
			{ test: /\.less/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] },
			// 注意：sass文件的后缀是scss
			{ test: /\.scss/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] },
			{
				test: /\.jpg|png|gif|bmp|svg|ttf|eot|woff|woff2$/,
				// limit用来指定文件的大小，只有小于limit大小的图片才会被转成base64图片
				// use: 'url-loader?limit=16940&esModule=false'  
				// https://blog.csdn.net/simper_boy/article/details/103455444
				use: 'url-loader?limit=16940&esModule=false'
			},
			// exclude 为排除项，表示不需要处理的js文件位置
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
			{ test: /\.vue$/, use: 'vue-loader' },
		]
	},
	performance: { hints: false }, // https://blog.csdn.net/hzxOnlineOk/article/details/101282798
	devServer: {
		hot: true
	}
}